<template>
    <div>
        <h1>会员添加</h1>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>会员名称</td>
                    <td><input type="text" v-model="info.huiYuanName"></td>
                </tr>
                <tr>
          <td >门店图片</td>
          <td>
            <input type="file" @change="img" />
            <img
              :src="info.photo"
              width="100"
              height="100"
              v-if="info.photo != ''"
            />
          </td>
        </tr>
        <tr>
          <td>会员类型</td>
          <td>
            <select v-model="info.huiYuanTypeName">
              <option value="">请选择</option>
              <option value="普通会员">普通会员</option>
              <option value="高级会员">高级会员</option>
              <option value="超级会员">超级会员</option>
              <option value="VIP会员">VIP会员</option>
              <option value="至尊会员">至尊会员</option>
           
            </select>
        </td>
        </tr>
        <tr>
          <td>会员数量</td>
          <td>
            <input type="text" v-model="info.num" />
          </td>
        </tr>
        <tr>
          <td>会员描述</td>
          <td>
            <textarea v-model="info.huiYuanText"></textarea>
        </td>
        </tr>
                <tr>
                    <td></td>
                    <td>
                        <button @click="AddHuiYuan">修改</button>
                    </td>
                </tr>
            </tbody>
        </table>
               
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import moment from 'moment';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();
 let info: any = reactive({
    id: route.query.id,
 huiYuanName: "",
  photo: "",
  huiYuanTypeName: "",
  num: '',
  huiYuanText: "",
  
 })
 const img =(img1:any)=>{
    let obj=img1.target.files[0];
    let f=new FormData();
    f.append('fore',obj)
    axios({
        url:'/api/tu/img',
        data:f,
        method:'post',
        
        
    })
    .then(res=>{
        info.photo=res.data;
        if(info.photo=='不是图片'){
         alert('只能是 jpg、png 格式')  
         return;
        }
        if(info.photo=='大于2M'){
         alert('图片不能大于2M')
         return;
        }
    })
    onMounted(()=>{
        funelist();
    })
}
const AddHuiYuan=()=>{
    if(info.huiYuanName==''){
        alert('请输入会员名称')
        return;
    } 
    if(info.photo==''){
        alert('请上传图片')
        return;
    }
    if(info.huiYuanTypeName==''){
        alert('请选择会员类型')
        return;
  
    }
    if(info.num==''){
        alert('请输入会员数量')
        return;
    }
    if(info.huiYuanText==''){
        alert('请输入会员描述')
        return;
    }
    axios({
        url: '/api/HuiYuan/HyUpdate',
        method: 'put',
        data: info
    })
  .then((res)=>{
      if(res.data=1){
        alert('修改成功')
        router.push('/ShowHuiYuan')
      }
      else{
          alert('修改失败')
          return;
      }
   }) 
.catch((err)=>{
     console.log(err);
 })
}
const funelist=()=>{
    axios({
        url: '/api/HuiYuan/HYFune',
        method: 'get',
        params: { id: route.query.id }
    }) 
 .then((res)=>{
    info.huiYuanName=res.data.huiYuanName;  
    info.photo=res.data.photo;
    info.huiYuanTypeName=res.data.huiYuanTypeName;
    info.num=res.data.num;
    info.huiYuanText=res.data.huiYuanText;
    console.log(info);

   }) 
.catch((err)=>{
      console.log(err);
  }) 

 
}

</script>

<style scoped>

</style>